<template>
  <div class="modal-demo">
    <el-button @click="showModal">打开对话框</el-button>
    <el-dialog
        title="归档课程"
        v-model="dialogVisible"
        width="60%"
        @close="handleClose"
    >
      <div class="top-container">
        <el-tabs v-model="activeTab" class="tabs-container">
          <el-tab-pane label="我教的(0)" name="teach"></el-tab-pane>
          <el-tab-pane label="我学的(1)" name="study"></el-tab-pane>
          <el-tab-pane label="我协助的(0)" name="assist"></el-tab-pane>
        </el-tabs>
        <div class="search-container">
          <el-input placeholder="请输入内容" v-model="searchValue" suffix-icon="el-icon-search"></el-input>
        </div>
      </div>
      <div class="content-container">
        <div class="left-block" v-show="activeTab === 'teach' || activeTab === 'study' || activeTab === 'assist'">
          <el-table :data="semesterData" v-if="semesterData.length > 0" @row-click="selectSemester">
            <el-table-column prop="semester" label="学期"></el-table-column>
          </el-table>
          <div v-else class="empty-data">
            <img src="https://element.eleme.cn/static/theme-chalk/demo/index-bg.1934c65d.png" alt="" />
            <p>暂无数据</p>
          </div>
        </div>
        <div class="right-block" v-show="activeTab === 'teach' || activeTab === 'study' || activeTab === 'assist'">
          <div v-if="selectedCourses.length > 0">
            <div v-for="course in selectedCourses" :key="course.courseName" class="course-item">
              <div class="course-image">
                <img :src="course.image" :alt="course.courseName" />
              </div>
              <div class="course-info">
                <p>{{ course.courseName }}</p>
                <p>{{ course.classInfo }}</p>
                <p>{{ course.joinCode }}</p>
                <p>{{ course.memberCount }}人</p>
              </div>
            </div>
          </div>
          <div v-else class="empty-data">
            <img src="https://element.eleme.cn/static/theme-chalk/demo/index-bg.1934c65d.png" alt="" />
            <p>暂无数据</p>
          </div>
        </div>
      </div>
      <template v-slot:footer>
        <div class="dialog-footer">
            <el-button type="primary" @click="handleConfirm">确定</el-button>
        </div>
    </template>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
      activeTab: 'study',
      searchValue: '',
      semesterData: [
        { semester: '2024 - 2025 第一学期' },
        { semester: '2023 - 2024 第一学期' }
      ],
      courseData: [
        {
          courseName: '软件工程导论',
          classInfo: '23 级软件工程 1 - 2 班',
          joinCode: 'ARFEZ9',
          semester: '2024 - 2025 第一学期',
          memberCount: 84,
          image: 'https://placehold.co/150x150?text=课程图片',
          type: 'teach' // 新增字段，表示课程类型
        },
        {
          courseName: '数据结构',
          classInfo: '23 级计算机科学 1 班',
          joinCode: 'BGFEZ9',
          semester: '2024 - 2025 第一学期',
          memberCount: 60,
          image: 'https://placehold.co/150x150?text=课程图片',
          type: 'study' // 新增字段，表示课程类型
        },
        {
          courseName: '操作系统',
          classInfo: '23 级计算机科学 2 班',
          joinCode: 'CGFEZ9',
          semester: '2024 - 2025 第一学期',
          memberCount: 70,
          image: 'https://placehold.co/150x150?text=课程图片',
          type: 'assist' // 新增字段，表示课程类型
        }
      ],
      selectedSemester: null,
      selectedCourses: []
    };
  },
  methods: {
    showModal() {
      this.dialogVisible = true;
    },
    handleClose() {
      this.dialogVisible = false;
    },
    handleConfirm() {
      this.dialogVisible = false;
    },
    selectSemester(row) {
      this.selectedSemester = row.semester;
      this.selectedCourses = this.courseData.filter(course =>
          course.semester === row.semester && course.type === this.activeTab
      );
    }
  },
  watch: {
    activeTab() {
      if (this.selectedSemester) {
        this.selectedCourses = this.courseData.filter(course =>
            course.semester === this.selectedSemester && course.type === this.activeTab
        );
        console.log(111)
      }
    }
  }
};
</script>

<style scoped>
.top-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  border: 1px solid #e4e7ed; /* 添加边框 */
}
.tabs-container {
  flex: 1;
}
.search-container {
  width: 200px;
  margin-top: -15px;
}
.content-container {
  display: flex;
  border: 1px solid #e4e7ed; /* 添加边框 */
}
.left-block {
  width: 20%;
  border-right: 1px solid #e4e7ed; /* 添加边框 */
  padding: 10px;
}
.right-block {
  width: 80%;
  padding: 10px;
}
.empty-data {
  text-align: center;
  padding: 50px 0;
}
.course-item {
  display: flex;
  margin-bottom: 20px;
  border: 1px solid #e4e7ed; /* 添加边框 */
  padding: 10px;
}
.course-image {
  width: 150px;
  height: 150px;
  margin-right: 20px;
}
.course-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.course-info {
  flex: 1;
}
.course-info p {
  margin: 5px 0;
}
</style>